<!--代码逻辑和样式库-->
<script src="./user-manage.component.js"></script>
<style src="./user-manage.scss" scoped lang="scss"></style>

<template>
  <div>
    <!-- 搜索区域 -->
    <div v-if="codesCheck.indexOf('Query') !== -1" class="search-container">
      <el-form label-position="top">
        <el-row type="flex">
          <el-col :span="24" class="aq-vertical-middle">
            <el-input v-if="codesCheck.indexOf('Query') !== -1" v-model="queryString" placeholder="请输入人员姓名或联系方式" class="keyword" clearable @keyup.enter.native="search()" />
            <el-button v-waves v-if="codesCheck.indexOf('Query') !== -1" type="primary" icon="el-icon-search" class="aq-margin-left-4" @click="search()">
              查询
            </el-button>
            <el-button v-waves v-if="codesCheck.indexOf('Query') !== -1" type="warning" icon="el-icon-refresh" @click="reset()">
              重置
            </el-button>
            <el-button v-waves v-if="codesCheck.indexOf('Create') !== -1" type="success" icon="el-icon-edit" @click="openEditDialog('create')">
              创建
            </el-button>
            <!-- el-button v-waves v-if="codesCheck.indexOf('Delete') !== -1" type="danger" icon="el-icon-delete" @click="deleteSelectedData()">
              批量删除
            </el-button -->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 内容区域 -->
    <div class="content-container aq-margin-top-16">
      <!--用户列表table-->
      <el-table v-loading="loading" :data="data" border fit highlight-current-row @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" fixed></el-table-column>
        <el-table-column align="center" width="75" fixed label="排序">
          <template slot-scope="scope">
            <span>{{ (scope.$index + 1)+ (pageNum -1 )*recordNum }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="trueName" label="姓名" width="100px" />
        <!--<el-table-column prop="userName" label="头像" width="85px" align="center">
          <template slot-scope="scope">
            <el-image v-if="scope.row.headImgUrl && scope.row.headImgUrl != 'string'" class="head-img" :src="file_url + scope.row.headImgUrl" fit="contain"></el-image>
          </template>
        </el-table-column>-->
        <el-table-column prop="structName" label="组织架构" />
        <el-table-column prop="sex" label="性别" align="center" width="80px" />
        <el-table-column prop="mobileNumber" label="联系方式" width="120px" />
        <el-table-column prop="card" label="身份证号" width="210px" />
        <!--<el-table-column prop="regName" label="所属地区" width="210px" />-->
        <el-table-column prop="text" label="操作" width="150px" align="center" fixed="right">
          <template slot-scope="scope">
            <el-link v-if="codesCheck.indexOf('Edit') != -1" icon="el-icon-edit" type="primary" @click="openEditDialog('edit', scope.row)">编辑</el-link>
            <el-link class="aq-margin-left-16" v-if="codesCheck.indexOf('Delete') != -1" icon="el-icon-delete" size="mini" type="danger" @click="deleteSelectedData(scope.row.objectId)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页插件 -->
      <pagination v-show="totalNum > 0" :total="totalNum" :page.sync="pageNum" :limit.sync="recordNum" @pagination="getDataList" />
    </div>

    <!-- 创建/编辑信息弹窗开始 -->
    <el-dialog :title="dialogTitle" :visible.sync="editDialogVisible" width="700px">
      <el-form ref="dataForm" :rules="editRules" :model="editForm" label-position="left" label-width="110px">
        <el-row :gutter="30">
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item prop="trueName" label="姓名:">
              <el-input v-model="editForm.trueName" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="性别:" prop="enumSex">
              <el-radio-group v-model="editForm.enumSex">
                <el-radio label="0">男</el-radio>
                <el-radio label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="身份证号:" prop="card">
              <el-input v-model="editForm.card" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item prop="mobileNumber" label="联系方式:">
              <el-input v-model="editForm.mobileNumber" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="分配角色:">
              <el-select v-model="editForm.selectedRoles" clearable filterable multiple>
                <el-option v-for="item in roleList" :key="item.objectId" :label="item.name" :value="item.objectId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="组织架构:" prop="structName">
              <el-input v-model="editForm.structName" type="text" class="el-input-width" clearable disabled="disabled" placeholder="请选择组织部门">
                <i slot="suffix" class="el-icon-circle-plus-outline" @click="openDepartmentDialog()"></i>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item :rules="{ required: editForm.isEnable ? true : false, message: '此项为必填项', trigger: 'blur' }" prop="userName" label="账号:" class="aq-margin-left-36" label-width="70px">
              <el-input v-model="editForm.userName" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item :rules="{ required: editForm.isEnable ? true : false, message: '此项为必填项', trigger: 'blur' }" prop="userName" label="密码:" class="aq-margin-left-36" label-width="70px">
              <el-input v-model="editForm.password" type="password" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <!--<el-col :xs="24" :sm="24" :md="12" class="aq-vertical-middle">
            <el-form-item label="上传头像:">
              <el-upload class="avatar-uploader" :action="file_url + 'file/upload'" :show-file-list="false" :on-success="handleAvatarSuccess">
                <img v-if="editForm.headImgUrl" :src="file_url + editForm.headImgUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <i v-if="editForm.headImgUrl" @click="handleAvatarRemove()" class="el-icon-delete avatar-delete-icon"></i>
            </el-form-item>
          </el-col>-->
        </el-row>
        <!--<el-row :gutter="30">
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="组织架构:" prop="structName">
              <el-input v-model="editForm.structName" type="text" class="el-input-width" clearable disabled="disabled" placeholder="请选择组织部门">
                <i slot="suffix" class="el-icon-circle-plus-outline" @click="openDepartmentDialog()"></i>
              </el-input>
            </el-form-item>
          </el-col>
          &lt;!&ndash;<el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="所属地区:" prop="selectedAreaId">
              <el-select v-model="editForm.selectedAreaId" clearable filterable>
                <el-option v-for="item in areaList" :key="item.objectId" :label="item.regName" :value="'' + item.objectId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>&ndash;&gt;
        </el-row>-->
        <!--<el-row :gutter="30">
          <el-col :span="24" class="aq-vertical-middle">
            <el-form-item label="是否启用账号:" label-width="110px">
              <el-switch v-model="editForm.isEnable"></el-switch>
            </el-form-item>
            <el-form-item :rules="{ required: editForm.isEnable ? true : false, message: '此项为必填项', trigger: 'blur' }" v-if="editForm.isEnable" prop="userName" label="账号:" class="aq-margin-left-36" label-width="70px">
              <el-input v-model="editForm.userName" class="el-input-width" clearable />
            </el-form-item>
            <el-form-item v-if="editForm.isEnable && editForm.objectId" class="aq-margin-left-16 reset-pwd">
              <el-button type="warning" @click="resetPwd()">重置密码</el-button>
            </el-form-item>
          </el-col>
        </el-row>-->
        <el-row class="aq-margin-top-12">
          <el-col :xs="24" :sm="24" :lg="24" align="center">
            <el-button type="primary" class="action-btn" @click="save()">确定</el-button>
            <el-button class="action-btn" @click="editDialogVisible = false">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 选择部门信息弹窗开始 -->
    <el-dialog :visible.sync="departmentDialogVisible" title="请选择部门" width="450px">
      <el-tree ref="tree" :check-strictly="true" :data="departmentList" :props="defaultProps" :default-checked-keys="departmentList" node-key="id" show-checkbox default-expand-all highlight-current @check-change="setCheckNode" />
      <el-row class="aq-padding-top-12">
        <el-col :xs="24" :sm="24" :lg="24" align="right">
          <el-button type="primary" class="action-btn" @click="getDepartmentCheckedNodes()">确定</el-button>
          <el-button class="action-btn" @click="departmentDialogVisible = false">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 选择部门信息弹窗结束 -->
  </div>
</template>
